<template>
  <Footer
      :style="{
        width: '100%',
        height: '48px',
        backgroundColor: 'rgba(33,33,33,.8)',
        lineHeight: '48px',
        color: '#FFF',
        position: 'fixed',
        bottom: '0px',
        zIndex: 1,
        paddingTop: '0px',
        paddingBottom: '0px',
        paddingLeft: footerPaddingLeft,
        paddingRight: footerPaddingRight,
        transition: 'all 0.2s ease-in-out 0s'
      }" @click.stop.native="footerClickHandle">
    <div :style="{float: 'left'}">
      <Select v-show="pageMetadata.develop_canvas == 'AbsoluteLayoutCanvas'" transfer size="small" v-model="canvasSize" style="width:150px"
              :disabled="!pageMetadata.id" placeholder="画布尺寸" @on-change="canvasSizeChange">
        <Icon type="md-phone-landscape" slot="prefix" style="margin-top: 1px;"/>
        <OptionGroup label="预设像素尺寸">
          <Option v-for="item in $PnDict.canvasSizes2" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </OptionGroup>
        <OptionGroup label="预设设备尺寸">
          <Option v-for="item in $PnDict.canvasSizes" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </OptionGroup>
      </Select>
      <Poptip placement="top" :width="pageMetadata.develop_canvas == 'AbsoluteLayoutCanvas' ? 575: 375" :transfer="true">
        <Button class="m-l-5px" size="small" type="text">
          <Icon custom="iconfont icon-keyboard"/>
        </Button>
        <div slot="content" style="overflow-x: hidden">
          <table class="keyboard-remark-table">
            <thead>
            <tr>
              <th>快捷键</th>
              <th>描述</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>Ctrl/Cmd + S</td>
              <td>保存当前页面布局</td>
            </tr>
            <tr>
              <td>Ctrl/Cmd + Z</td>
              <td>撤销、回退</td>
            </tr>
            <tr>
              <td>Ctrl/Cmd + Y</td>
              <td>单步恢复</td>
            </tr>
            <tr>
              <td>Ctrl/Cmd + 鼠标单击布局块或组</td>
              <td>多选布局块或组</td>
            </tr>
            <tr v-show="pageMetadata.develop_canvas == 'AbsoluteLayoutCanvas'">
              <td>按住Shift键 + 按住鼠标在画布中拖动</td>
              <td>框选组</td>
            </tr>
            <tr v-show="pageMetadata.develop_canvas == 'AbsoluteLayoutCanvas'">
              <td>按住Alt键 + 按住鼠标在画布中拖动</td>
              <td>框选布局块（框选布局块会自动过滤掉已被成组的布局块）</td>
            </tr>
            <tr v-show="pageMetadata.develop_canvas == 'AbsoluteLayoutCanvas'">
              <td>方向键</td>
              <td>移动被选中的布局块或组</td>
            </tr>
            <tr>
              <td>Cmd + Backspace或Delete键</td>
              <td>快捷删除所选布局块或组</td>
            </tr>
            </tbody>
          </table>
        </div>
      </Poptip>
    </div>
    <div :style="{float: 'right'}">
      <Tooltip v-if="pageMetadata.develop_canvas == 'AbsoluteLayoutCanvas'" content="画布映射" placement="left">
        <Button class="m-l-5px" size="small" :type="canvasMapCollapsed ? 'default':'primary'" @click="toggleCanvasMapCollapsed">
          <Icon custom="iconfont icon-canvas-map"/>
        </Button>
      </Tooltip>
    </div>

  </Footer>
</template>

<script>
  import {createHelpers} from 'vuex-map-fields';

  const {mapFields} = createHelpers({
    getterType: 'designer/getField',
    mutationType: 'designer/updateField',
  });

  export default {
    name: 'DesignerFooter',

    data() {
      return {
        canvasSize: '',
        customCanvasSize: [],

        footerPaddingLeft: '460px',
        footerPaddingRight: '340px'
      }
    },
    mounted() {
      if (this.pageMetadata.id) {
        this.initCanvasSize();
      }
    },
    methods: {
      footerClickHandle() {
        this.$EventBus.$emit('pn_footerClick')
      },

      initCanvasSize() {
        if (this.pageMetadata.id) {
          let width = this.pageMetadata.layout.layoutConfigData.width;
          let widthPixelUnit = this.pageMetadata.layout.layoutConfigData.widthPixelUnit;
          let height = this.pageMetadata.layout.layoutConfigData.height;
          let heightPixelUnit = this.pageMetadata.layout.layoutConfigData.heightPixelUnit;

          let flag = false;
          let value = '';
          let newCanvasSizes = this.$PnDict.canvasSizes.concat(this.$PnDict.canvasSizes2);

          newCanvasSizes.forEach(item => {
            let arr = item.value.split('*');
            if (parseInt(arr[0]) == width && parseInt(arr[1]) == height && arr[2] == widthPixelUnit && arr[3] == heightPixelUnit) {
              value = item.value;
              flag = true
            }
          });

          if (flag) {
            this.canvasSize = value
          } else {
            this.canvasSize = ''
          }
        } else {
          this.canvasSize = ''
        }
      },
      canvasSizeChange(value) {
        if (value) {
          let arr = value.split('*');
          let tmpPageMetadata = this.$PnUtil.deepClone(this.pageMetadata);
          tmpPageMetadata.layout.layoutConfigData.width = parseInt(arr[0]);
          tmpPageMetadata.layout.layoutConfigData.widthPixelUnit = arr[2];
          tmpPageMetadata.layout.layoutConfigData.height = parseInt(arr[1]);
          tmpPageMetadata.layout.layoutConfigData.heightPixelUnit = arr[3];
          this.$store.commit('designer/setPageMetadata', tmpPageMetadata);
        }
      },

      toggleCanvasMapCollapsed () {
        this.$store.commit('designer/toggleCanvasMapCollapsed');
      }
    },
    computed: {
      ...mapFields({
        pageMetadata: 'pageMetadata',
        layout: 'pageMetadata.layout',

        structureTreeSidebarCollapsed: 'structureTreeSidebarCollapsed',
        componentLibrarySidebarCollapsed: 'componentLibrarySidebarCollapsed',
        rightSidebarCollapsed: 'rightSidebarCollapsed',
        canvasMapCollapsed: 'canvasMapCollapsed',
      })
    },
    watch: {
      'pageMetadata.id': {
        handler: 'initCanvasSize'
      },
      'pageMetadata.layout.layoutConfigData.width': {
        handler: function (val) {
          this.initCanvasSize();
        }
      },
      'pageMetadata.layout.layoutConfigData.height': {
        handler: 'initCanvasSize'
      },
      'structureTreeSidebarCollapsed': {
        handler: function (val) {
          if (val) {
            if (this.componentLibrarySidebarCollapsed) {
              this.footerPaddingLeft = '10px'
            } else {
              this.footerPaddingLeft = '240px'
            }
          } else {
            if (this.componentLibrarySidebarCollapsed) {
              this.footerPaddingLeft = '230px'
            } else {
              this.footerPaddingLeft = '460px'
            }
          }
        },
        immediate: true
      },
      'componentLibrarySidebarCollapsed': {
        handler: function (val) {
          if (val) {
            if (this.structureTreeSidebarCollapsed) {
              this.footerPaddingLeft = '10px'
            } else {
              this.footerPaddingLeft = '230px'
            }
          } else {
            if (this.structureTreeSidebarCollapsed) {
              this.footerPaddingLeft = '240px'
            } else {
              this.footerPaddingLeft = '460px'
            }
          }
        },
        immediate: true
      },
      'rightSidebarCollapsed': {
        handler: function (val) {
          if (val) {
            this.footerPaddingRight = '10px'
          }else {
            this.footerPaddingRight = '340px'
          }
        },
        immediate: true
      }
    }
  }
</script>

<style scoped>
  >>> .ivu-select-prefix {
    margin-top: 1px;
  }

  table.keyboard-remark-table {
    font-size: 11px;
    color: #333333;
    border-width: 1px;
    border-color: #666666;
    border-collapse: collapse;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  table.keyboard-remark-table th {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #757575;
    background-color: #363636;
    color: #fafafa;
  }

  table.keyboard-remark-table td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #757575;
    background-color: #424242;
    color: #fafafa;
  }
</style>
